 <template>
    <section class="cart_module">
        <section  class="cart_button">
            <transition name="showReduce">
                <span @click="removeOutCart(foods)" v-if="foodNum">
                   <i class="icon-remove"></i>
                </span>
            </transition>
            <transition name="fade">
                <span class="cart_num" v-if="foodNum">{{foodNum}}</span>
            </transition>
            <i class="icon-add" @touchstart="addToCart(foods,$event)"></i>
        </section>
    </section>
</template>

<script>
    import {mapGetters, mapActions} from 'vuex'
    export default {
    	data(){
            return{
               showMoveDot: [], //控制下落的小圆点显示隐藏
            }
				},
        computed: {
            ...mapGetters({
              'products': 'cartProducts'
            }),
            //当购买商品的时候，购物车数量也改变
            foodNum: function (){
               if(this.products.length>0){
								 for(let i =0;i<this.products.length;i++){
									 if(this.products[i].id === this.foods.id){
										 return this.products[i].num
									 }
								 }
							 }else{
								 return 0
							 }
            },
        },
        props:['foods','shopId'],
        methods: {
            ...mapActions({
							'add': 'addToCart',
							'remove': 'removeToCart'
            }),
            //移出购物车
            removeOutCart(foods){
                if (this.foodNum > 0) {
                   this.remove({payload:foods})
                }
            },
            //加入购物车，计算按钮位置。
            addToCart(foods, event){
								// 使用 vuex来添加管理数据流
								this.add({payload:foods,shopId:this.shopId})
                let elLeft = event.target.getBoundingClientRect().left;
                let elBottom = event.target.getBoundingClientRect().bottom;
                this.showMoveDot.push(true);
                this.$emit('showMoveDot', this.showMoveDot, elLeft, elBottom);

            }
				}
    }
</script>
<style scoped>
.cart_module .add_icon{position:relative;z-index:999
}
.cart_module .cart_button{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center
}
.cart_module svg{width:.9rem;height:.9rem;fill:#3190e8
}
.cart_module .specs_reduce_icon{fill:#999
}
.cart_module .cart_num{font-size:.65rem;color:#666;min-width:1rem;text-align:center;font-family:Helvetica Neue,Tahoma
}
.cart_module .choose_specification .choose_icon_container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center
}
.cart_module .choose_specification .choose_icon_container .show_chooselist{display:block;font-size:.55rem;color:#fff;padding:.1rem .2rem;background-color:#3190e8;border-radius:0.2rem;border:1px solid #3190e8
}
.showReduce-enter-active,.showReduce-leave-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out
}
.showReduce-enter,.showReduce-leave-active{opacity:0;-webkit-transform:translateX(1rem);-ms-transform:translateX(1rem);transform:translateX(1rem)
}
.fade-enter-active,.fade-leave-active{-webkit-transition:all .3s;transition:all .3s
}
.fade-enter,.fade-leave-active{opacity:0
}
.fadeBounce-enter-active,.fadeBounce-leave-active{-webkit-transition:all .3s;transition:all .3s
}
.fadeBounce-enter,.fadeBounce-leave-active{opacity:0;-webkit-transform:scale(0.7);-ms-transform:scale(0.7);transform:scale(0.7)
}
</style>